<template>
  <!-- 模块1 -->
  <div class="modular">
    <div class="modular_top">
      <div class="triangle"></div>
      <div class="modular_icon">
        <img src="@/assets/img/bjqk.png" alt="">
      </div>
      <h2>设备状态</h2>
    </div>
    <div class="status_btns">
      <div class="status_item">
        <h2>报警总数</h2>
        <div class="btn">
          <h3>{{ info.total }}<span>次</span></h3>
        </div>
      </div>
      <div class="status_item">
        <h2>已处理</h2>
        <div class="btn">
          <h3>{{ info.processed }}<span>次</span></h3>
        </div>
      </div>
      <div class="status_item">
        <h2>平均处理时长</h2>
        <div class="btn">
          <h3>{{ info.average_duration }}<span>分钟</span></h3>
        </div>
      </div>
    </div>
    <div class="status_cont">
      <div class="statusEcharts_cont">
        <div class="statusEcharts1"></div>
        <div class="status_bj"></div>
      </div>
      <div class="status_bj"></div>
      <div class="statusEcharts_cont">
        <div class="statusEcharts2"></div>
        <div class="status_bj"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as api from '@/assets/utils/api.js'

export default {
  data() {
    return {
      myChart: {},
      myChart2: {},
      tenantid: 1128,
      info: {}
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    async getData() {
      const res = await api.getDeviceStatus({ tenantid: this.tenantid })
      this.info = res.data
      this.initChart(this.info)
      this.initChart2(this.info)
      //根据窗口变化自动调节图表大小
      window.addEventListener('resize', () => {
        this.myChart.resize()
        this.myChart2.resize()
      })
    },
    initChart(info) {
      this.myChart = this.$echarts.init(document.querySelector('.statusEcharts1'))
      let option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'horizontal',
          left: 'center',
          bottom: 12,
          itemHeight: 8,
          itemWidth: 8,
          icon: 'circle',
          itemGap: 15,
          textStyle: {
            fontSize: '0.12rem',//字体大小
            color: '#ffffff',//字体颜色,
          },
        },
        color: ['#519bee', '#cddb7a', '#df6839', '#6c2ad0'],
        series: [
          {
            // name: 'Access From',
            type: 'pie',
            radius: ['20%', '55%'],
            center: ['50%', '40%'],
            avoidLabelOverlap: false,
            data: [
              // { value: info.normal, name: '正常' },
              { value: info.off_line, name: '离线' },
              { value: info.warning, name: '告警' },
              { value: info.fault, name: '故障' }
            ],
            label: {
              fontSize: '0.12rem',
              color: '#fff',
            }
          }
        ]
      }
      this.myChart.setOption(option)
    },
    initChart2(info) {
      this.myChart2 = this.$echarts.init(document.querySelector('.statusEcharts2'))
      let option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'horizontal',
          left: 'center',
          bottom: 12,
          itemHeight: 8,
          itemWidth: 8,
          icon: 'circle',
          itemGap: 15,
          textStyle: {
            fontSize: '0.12rem',//字体大小
            color: '#ffffff',//字体颜色,
          },
        },
        color: ['#2c60d7', '#6fc0ff'],
        series: [
          {
            // name: 'Access From',
            type: 'pie',
            radius: ['20%', '55%'],
            center: ['50%', '40%'],
            avoidLabelOverlap: false,
            label: {
              fontSize: '0.12rem',
              color: '#fff',
            },
            data: [
              { value: info.processed, name: '已处理' },
              { value: info.untreated, name: '未处理' },
            ],
          }
        ]
      }
      this.myChart2.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.status_btns {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0.55rem 0.55rem 0 0.55rem;

  .status_item {
    width: 26%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    h2 {
      color: #fff;
      font-size: 0.12rem;
      padding-bottom: 0.05rem;
    }

    .btn {
      width: 100%;
      height: 0.32rem;
      background: url(@/assets/img/textbj.png) no-repeat center;
      background-size: 100% 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      h3 {
        font-family: 'loss';
        font-weight: 400;
        color: #00FFFF;
        // text-shadow: 0px 1px 3px rgba(13, 4, 8, 0.7500);

        background: linear-gradient(0deg, #0099FF 0%, #00FFFF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 0.22rem;

        span {
          font-size: 0.12rem;
          background: linear-gradient(0deg, #0099FF 0%, #00FFFF 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
    }
  }
}

.status_cont {
  width: 100%;
  display: flex;
  justify-content: space-between;
  position: relative;

  .statusEcharts_cont {
    width: 50%;
    height: 1.8rem;
    position: relative;

    .status_bj {
      position: absolute;
      left: 50%;
      top: -12%;
      width: 1.1rem;
      height: 1.1rem;
      border-radius: 50%;
      background: linear-gradient(0deg, #073487, #547FFE);
      opacity: 0.3;
      z-index: -1;
    }

    .statusEcharts1,
    .statusEcharts2 {
      width: 100%;
      height: 100%;
    }
  }

  .status_bj {
    position: absolute;
    width: 0.01rem;
    height: 0.9rem;
    left: 50%;
    transform: translate(-50%, 36%);
    background: url(@/assets/img/fgx.png) no-repeat center;
    background-size: 100% 100%;
  }
}
</style>
